import React, {Component} from 'react';
import {Form, Input, Button, message, Icon, Select, List, Tabs, Upload} from "antd";

class Join extends Component {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // message.success('Received values of form: ', values.DISCIPLINE);
                message.info(`Click on item ${values.DISCIPLINE}`);
                console.log(values);
            }
        });
    };
    normFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };

    render() {
        const Option = Select.Option;
        const {getFieldDecorator} = this.props.form;
        const TabPane = Tabs.TabPane;
        const data = [
            {
                title: '2018-12-25',
                desc: "入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式入会方式"
            }
        ];
        const data1 = [
            {
                title: '2018-12-25',
                desc: "协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程协会章程"
            }
        ];
        const data2 = [
            {
                title: '2018-12-25',
                desc: "会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准会费标准"
            }
        ];

        return (
            <div className="join-set">
                <div className="education-set row">
                    <div className="text-center">
                        <h2>加入协会</h2>
                        <div className="welding-set-gutter-line">
                            <hr/>
                            <span/>
                            <hr/>
                        </div>
                        <h3>JOIN THE ASSCIATION</h3></div>
                </div>

                <div className="clearfix mrt20" style={{padding: "0 2%"}}>
                    <div className="col-md-8">
                        <Tabs defaultActiveKey="1" onChange={this.callback} animated={false}>
                            <TabPane tab="入会方式" key="1">
                                <List
                                    size="small"
                                    bordered
                                    itemLayout="horizontal"
                                    dataSource={data}
                                    renderItem={item => (
                                        <List.Item>
                                            <List.Item.Meta description={item.desc}/>
                                        </List.Item>
                                    )}
                                />
                            </TabPane>
                            <TabPane tab="协会章程" key="2">
                                <List
                                    size="small"
                                    bordered
                                    itemLayout="horizontal"
                                    dataSource={data1}
                                    renderItem={item => (
                                        <List.Item>
                                            <List.Item.Meta description={item.desc}/>
                                        </List.Item>
                                    )}
                                />
                            </TabPane>
                            <TabPane tab="会费标准" key="3">
                                <List
                                    size="small"
                                    bordered
                                    itemLayout="horizontal"
                                    dataSource={data2}
                                    renderItem={item => (
                                        <List.Item>
                                            <List.Item.Meta description={item.desc}/>
                                        </List.Item>
                                    )}
                                />
                            </TabPane>
                        </Tabs>
                    </div>
                    <div className="col-md-4">
                        <h3 className="text-center color1 mrt10">在线申请入会</h3>
                        <div className="well">
                            <Form onSubmit={this.handleSubmit} className="">
                                <Form.Item>
                                    {
                                        getFieldDecorator('COMPANY', {
                                            initialValue: '',
                                            rules: [{
                                                required: true,
                                                message: '企业全称'
                                            },]
                                        })(<Input prefix={<Icon type="shop"/>} placeholder="企业全称"/>)
                                    }
                                </Form.Item>
                                <Form.Item>
                                    {
                                        getFieldDecorator('BUSINESS')(<Select placeholder="--请选择企业性质--">
                                            <Option value="jack">Jack</Option>
                                            <Option value="lucy">Lucy</Option>
                                            <Option value="disabled" disabled>Disabled</Option>
                                            <Option value="Yiminghe">yiminghe</Option>
                                        </Select>)
                                    }
                                </Form.Item>
                                <Form.Item>
                                    {
                                        getFieldDecorator('BUSINESS')(<Select placeholder="--请选择行业--">
                                            <Option value="jack">Jack</Option>
                                            <Option value="lucy">Lucy</Option>
                                            <Option value="disabled" disabled>Disabled</Option>
                                            <Option value="Yiminghe">yiminghe</Option>
                                        </Select>)
                                    }
                                </Form.Item>
                                <Form.Item>
                                    {
                                        getFieldDecorator('NAME', {
                                            initialValue: '',
                                            rules: [{
                                                required: true,
                                                message: '联系人'
                                            },]
                                        })(<Input prefix={<Icon type="user"/>} placeholder="联系人"/>)
                                    }
                                </Form.Item>
                                <Form.Item>
                                    {
                                        getFieldDecorator('PHONE', {
                                            initialValue: '',
                                            rules: [{
                                                required: true,
                                                message: '手机号码不能为空'
                                            },]
                                        })(<Input prefix={<Icon type="phone"/>} placeholder="请输入考试报名手机号码"/>)
                                    }
                                </Form.Item>
                                <Form.Item>
                                    {
                                        getFieldDecorator('EMAIL', {
                                            initialValue: '',
                                            rules: [{
                                                required: true,
                                                message: '邮箱'
                                            },]
                                        })(<Input prefix={<Icon type="mail"/>} placeholder="邮箱"/>)
                                    }
                                </Form.Item>
                                <Form.Item label="公司营业执照文件副本">
                                    {getFieldDecorator('upload', {
                                        valuePropName: 'fileList',
                                        getValueFromEvent: this.normFile,
                                    })(
                                        <Upload name="logo" action="/upload.do" listType="picture">
                                            <Button>
                                                <Icon type="upload"/>请上传公司营业执照
                                            </Button>
                                        </Upload>
                                    )}
                                </Form.Item>
                                <Form.Item className="text-center">
                                    <Button type="primary" htmlType="submit"
                                            className="mrr20">
                                        确认提交
                                    </Button>
                                    <Button type="button" htmlType="button"
                                            className="">
                                        取消操作
                                    </Button>
                                </Form.Item>
                                <div>
                                    <small>支持上传的文件类型有：PDF、JPG、PNG</small>
                                </div>
                            </Form>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Form.create()(Join);